
<!--
    与诗词有关的 API  (这个 Vue 组件只是测试API时用到，并没有挂载在实际页面中)
      1. 唐诗大全
      2. 唐诗三百首
      3. 优美诗句
      4. 天气诗句
      5. 古代情诗
      6. 藏头诗生成
-->
<template>
  <div>
    <h1>古诗词相关API</h1>
    <input type="button" @click="getTangPoem" value="唐诗大全">
    <input type="button" @click="getLovePoem" value="古代情诗">
    <input type="button" @click="getBeautifulPoem" value="优美诗句">
    <input type="button" @click="getWeatherPoem" value="天气诗句">
    <input type="text" v-model="title" placeholder="请输入需要生成的藏头诗常字内容">
    <input type="button" @click="getTitlePoem" value="藏头诗句生成">

    <br>
    <div>
      <p>唐诗大全</p>
      {{ tangPoem }}
    </div>
    <br>
    <div>
      <p>古代情诗</p>
      {{ lovePoem }}
    </div>
    <br>
    <div>
      <p>优美诗句</p>
      {{ beautifulPoem }}
    </div>
    <br>
    <div>
      <p>天气诗句</p>
      {{ weatherPoem}}
    </div>
    <br>
    <div>
      <p>藏头诗</p>
      {{ titlePoem }}
    </div>

  </div>
</template>

<script>
  export default {
    name: 'Poem',
    data() {
      return {
        /*  唐诗大全 */
        tangPoem: {},
        /*  古代情诗  */
        lovePoem: {},
        /*  优美诗句  */
        beautifulPoem: {},
        /*  天气诗句  */
        weatherPoem: {},
        /*  藏头诗*/
        title: "",
        titlePoem: {}

      }
    },
    methods: {
      async getTangPoem() {
        const result = await this.$http.get("http://api.tianapi.com/txapi/poetries/index?key=d1032a21949c41bbf6a472ec75a94e2a");
        console.log(result);
        this.tangPoem = result.data.newslist[0];
      },
      async getLovePoem() {
        const result = await this.$http.get("http://api.tianapi.com/txapi/qingshi/index?key=d1032a21949c41bbf6a472ec75a94e2a");
        console.log(result);
        this.lovePoem = result.data.newslist[0];
      },
      async getBeautifulPoem() {
        const result = await this.$http.get("http://api.tianapi.com/txapi/verse/index?key=d1032a21949c41bbf6a472ec75a94e2a");
        console.log(result);
        this.beautifulPoem = result.data.newslist[0];
      },
      async getWeatherPoem() {
        const result = await this.$http.get("http://api.tianapi.com/txapi/tianqishiju/index?key=d1032a21949c41bbf6a472ec75a94e2a");
        console.log(result);
        this.weatherPoem = result.data.newslist[0];
      },
      async getTitlePoem() {
        console.log("title = " + this.title);
        const result = await this.$http.get("http://api.tianapi.com/txapi/cangtoushi/index?key=d1032a21949c41bbf6a472ec75a94e2a&word=" + this.title);
        console.log(result);
        this.titlePoem = result.data.newslist[0];
      }
    }

  }
</script>

<style scoped>

</style>
